
<template>
  <div class="billing-container">
    <!-- 顶部导航 -->
    <el-menu
      mode="horizontal"
      :router="true"
      :default-active="activeMenu"
      class="billing-menu"
    >
      <el-menu-item index="/billing/invoices">
        <el-icon><Tickets /></el-icon>
        发票管理
      </el-menu-item>
      <el-menu-item index="/billing/statements">
        <el-icon><Document /></el-icon>
        对账单
      </el-menu-item>
      <el-menu-item index="/billing/payments">
        <el-icon><Money /></el-icon>
        收付款
      </el-menu-item>
      <el-menu-item index="/billing/pricing">
        <el-icon><PriceTag /></el-icon>
        价格管理
      </el-menu-item>
      <el-menu-item index="/billing/reports">
        <el-icon><DataLine /></el-icon>
        财务报表
      </el-menu-item>
    </el-menu>

    <!-- 面包屑导航 -->
    <div class="breadcrumb-container">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>财务管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ currentMenuTitle }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 子路由出口 -->
    <div class="billing-content">
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </div>

    <!-- 财务概览抽屉 -->
    <el-drawer
      v-model="overviewDrawer"
      title="财务概览"
      direction="rtl"
      size="400px"
    >
      <div class="overview-content">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-statistic 
              title="本月收入" 
              :value="monthlyStats.income"
              :precision="2"
            >
              <template #prefix>¥</template>
            </el-statistic>
          </el-col>
          <el-col :span="12">
            <el-statistic 
              title="本月支出" 
              :value="monthlyStats.expense"
              :precision="2"
            >
              <template #prefix>¥</template>
            </el-statistic>
          </el-col>
        </el-row>

        <el-divider />

        <h4>应收账款</h4>
        <el-progress
          :percentage="monthlyStats.receivableRate"
          :format="format => '¥' + monthlyStats.receivable"
          :stroke-width="15"
          status="warning"
        />

        <el-divider />

        <h4>收入趋势</h4>
        <div class="trend-chart">
          <!-- 这里可以集成图表组件显示收入趋势 -->
          <el-empty description="图表加载中...">
            <template #image>
              <el-icon style="font-size: 40px"><TrendCharts /></el-icon>
            </template>
          </el-empty>
        </div>

        <el-divider />

        <h4>待处理事项</h4>
        <el-timeline>
          <el-timeline-item
            v-for="item in pendingItems"
            :key="item.id"
            :timestamp="item.time"
            :type="item.type"
          >
            {{ item.title }}
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-drawer>

    <!-- 悬浮操作按钮 -->
    <div class="floating-actions">
      <el-button-group>
        <el-button 
          type="primary" 
          circle
          @click="overviewDrawer = true"
        >
          <el-icon><TrendCharts /></el-icon>
        </el-button>
        <el-button 
          type="success" 
          circle
          @click="createNewBill"
        >
          <el-icon><Plus /></el-icon>
        </el-button>
      </el-button-group>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  Tickets,
  Document,
  Money,
  PriceTag,
  DataLine,
  TrendCharts,
  Plus
} from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

// 当前激活的菜单项
const activeMenu = computed(() => route.path)

// 当前菜单标题
const currentMenuTitle = computed(() => {
  const menuTitles = {
    '/billing/invoices': '发票管理',
    '/billing/statements': '对账单',
    '/billing/payments': '收付款',
    '/billing/pricing': '价格管理',
    '/billing/reports': '财务报表'
  }
  return menuTitles[route.path] || '财务管理'
})

// 概览抽屉
const overviewDrawer = ref(false)

// 月度统计数据
const monthlyStats = ref({
  income: 256789.45,
  expense: 198234.67,
  receivable: 45678.90,
  receivableRate: 65
})

// 待处理事项
const pendingItems = ref([
  {
    id: 1,
    title: '3月份运输费用结算',
    time: '2025-03-15',
    type: 'warning'
  },
  {
    id: 2,
    title: '客户ABC对账确认',
    time: '2025-03-16',
    type: 'primary'
  },
  {
    id: 3,
    title: '发票开具申请审核',
    time: '2025-03-17',
    type: 'info'
  }
])

// 创建新账单
const createNewBill = () => {
  router.push('/billing/invoices/create')
  ElMessage.success('请选择账单类型')
}
</script>

<style scoped>
.billing-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.billing-menu {
  border-bottom: solid 1px var(--el-menu-border-color);
  padding: 0 20px;
}

.breadcrumb-container {
  padding: 16px 20px;
  background-color: var(--el-bg-color-page);
  border-bottom: 1px solid var(--el-border-color-light);
}

.billing-content {
  flex: 1;
  overflow: auto;
  background-color: var(--el-bg-color-page);
  position: relative;
}

/* 路由切换动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.floating-actions {
  position: fixed;
  right: 40px;
  bottom: 40px;
  z-index: 100;
}

.overview-content {
  padding: 20px;
}

.overview-content h4 {
  margin: 16px 0;
  color: var(--el-text-color-primary);
}

.trend-chart {
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--el-bg-color-page);
  border-radius: 4px;
}

:deep(.el-menu-item) {
  display: flex;
  align-items: center;
  gap: 8px;
}

:deep(.el-menu--horizontal) {
  border-bottom: none;
}

:deep(.el-menu-item.is-active) {
  font-weight: 500;
}

:deep(.el-timeline-item__content) {
  color: var(--el-text-color-regular);
}

:deep(.el-timeline-item__timestamp) {
  color: var(--el-text-color-secondary);
}
</style>